<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="执行" @click="lang">
        <input type="button" value="停止" @click="stop">

        <h3>{{ msg }}</h3>
    </div>

    <script>
        //  创建vue对象
        const vm = new Vue({
            // 在VM对象data中挂载数据 VM 的 methods 能访问
            data: {
                msg: '我拿Buff,谢谢~',
                IntervalId: null
            },
            methods: {
                lang() {
                    //如果定时器的ID，不等于null，表示已经有定时器在执行，则退出就不会执行第二次了
                    if (this.IntervalId !== null) return

                    this.IntervalId = setInterval(() => {
                        const header = this.msg.slice(0, 1)
                        const body = this.msg.slice(1)
                        this.msg = body + header
                    }, 300)
                },
                stop() {
                    //清除定时器
                    clearInterval(this.IntervalId)
                    //在清除定时器后，需要考虑第二次执行能正常开启，那就要把 intervalId 重置为null
                    this.IntervalId = null
                }
            }
        }).$mount('#app')
    </script>
</body>

</html>